﻿<!DOCTYPE html>
<html>
<head>
    <!--Là khách hàng tôi muốn có trang sự kiện gồm: các sự kiên quan trọng sẽ diễn ra-->
    <title>Liên hệ</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="script/jquery-3.1.0.min.js"></script>
    <script src="script/jquery.validate.min.js"></script>
    <script src="script/jquery.mask.min.js"></script>
    <link href="Hieu_css.css" rel="stylesheet" type="text/css" />
    <link href="main_style.css" rel="stylesheet" type="text/css" />
    <link href="nav_footer_header.css" rel="stylesheet" type="text/css" />
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script>
        $(document).ready(function () {
            $('.nav.nenxam').load('menu.html');
            $('#Phone').mask('Z9999999999', {
                translation: {
                    'Z': {
                        pattern: /[0]/,
                        optional: false
                    }
                }
            });

            $('form.form_contact').on('submit', function (e) {
                e.preventDefault();
                if ($('form.form_contact').valid()) {
                    alert('Cảm ơn bạn ' + $('#FirstName').val() + ' đã gửi góp ý.');
                }
                
            });
        });
    </script>
</head>
<body>
    <div id="page">
        <!--............start nav..................-->

        <div class="nav nenxam">
            <!--............ Sử dụng ajax Load() để điền mã html từ file menu.html ..................-->
        </div>
        <!--................end nav.....................-->
        <!--................start panel.....................-->
        <div class="tieu_de can_left">
            <p>Liên Hệ Với Chúng Tôi</p>
        </div>
        <!--.....................end panel.................-->

        <div class="ben_trai">
            <!--..........start contact..........-->

            <div class="box nengray">
                <h4>
                    LIÊN HỆ TRỰC TIẾP
                </h4>
                <p class="bold" style="font-size: 16px; margin-bottom: -5px;">
                    Nếu bạn có vấn đề gì cần liên hệ trực tiếp với tôi, vui lòng xem thông tin bên dưới:
                </p>
                <p style="padding-left: 15px; line-height: 30px; text-indent: 0px;">
                    Điện Thoại: <i>090 308 7580</i><br>
                    Nick yahoo: <i>php_vnn</i><br>
                    Email: <i>sky@qhonline.info</i><br>
                    Facebook: <i>https://www.facebook.com/</i>s
                </p>
            </div>
            <div class="box">
                <h4>
                    LIÊN HỆ QUA HỆ THỐNG WEBSITE
                </h4>
                <p>
                    + Để thực hiện việc liên hệ các bạn vui lòng điền vào theo form bên dưới.
                </p>
                <form class="form_contact form-group" method="POST">
                    <table>
                        <tr>
                            <td>Họ: </td>
                            <td><input type="text" class="form-control" name="LastName" id="LastName" required placeholder="Họ"></td>
                        </tr>
                        <tr>
                            <td>Tên: </td>
                            <td><input type="text" class="form-control" name="FirstName" id="FirstName" required placeholder="Tên"></td>
                        </tr>
                        <tr>
                            <td>Email: </td>
                            <td><input type="email" class="form-control" name="GuestEmail" id="GuestEmail" required placeholder="Bichdao@gmail.com"></td>
                        </tr>
                        <tr>
                            <td>Số Điện Thoại: </td>
                            <td><input class="form-control" name="Phone" id="Phone" placeholder="Ex: 0985705221" type="text" maxlength="16"></td>
                        </tr>
                        <tr>
                            <td>Tin Nhắn: </td>
                            <td><textarea rows="4" class="form-control" cols="54" maxlength="255" required></textarea></td>
                        </tr>
                    </table>
                    <div class="col-sm-10">
                        <input id="btnSubmit" type="submit" class="btn btn-default btn-md" value="GỬI ĐI" />
                    </div>
                </form>
            </div>
        </div>

        <div class="ben_phai">
            <!--.....................start lịch giải đấu........................-->
            <div class="row">
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h3 class="panel-title">Lịch Ngoại Hạng Anh</h3>
                    </div>

                    <div class="panel-body">
                        <ul style="margin-left: -20px;">
                            <li><a href="#">Lịch thi đấu đầy đủ</a></li>
                            <li><a href="#">Bảng xếp hạng</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--.......................end lịch giải đấu.......................-->
            <!--.......................start danh mục giải đấu.............................-->
            <div class="row">
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h3 class="panel-title">Danh Mục Giải Đấu</h3>
                    </div>
                    <div class="panel-body">
                        <ul style="margin-left: -20px;">
                            <li>
                                <a href="#"><img src="img_Hieu/GiaiDau/SeriA.png" alt="" width="20" /> Serie A - 2016</a>
                            </li>
                            <li>
                                <a href="#"><img src="img_Hieu/GiaiDau/Ligue.png" width="20" alt="Giải vô địch Pháp 2016" />Giải vô địch Pháp 2016</a>
                            </li>
                            <li>
                                <a href="#"><img src="img_Hieu/GiaiDau/Laliga.png" width="20" alt="LA LIGA 2016" />LA LIGA 2016</a>
                            </li>
                            <li>
                                <a href="#"><img src="img_Hieu/GiaiDau/AFF.jpg" width="20" alt="AFF CUP 2016" />AFF CUP 2016</a>
                            </li>
                            <li>
                                <a href="#"><img src="img_Hieu/GiaiDau/Bundes.png" width="20" alt="Bundesliga 2016" />Bundesliga 2016</a>
                            </li>
                            <li>
                                <a href="#"><img src="img_Hieu/GiaiDau/Preme.jpg" width="20" alt="Ngoại hạng Anh 2016" />Ngoại hạng Anh 2016</a>
                            </li>
                            <li>
                                <a href="#"><img src="img_Hieu/GiaiDau/Euro.jpg" width="20" alt="Euro 2016" />Euro 2016</a>
                            </li>
                            <li>
                                <a href="#"><img src="img_Hieu/GiaiDau/VLeague.png" width="20" alt="VLeague 2016" />VLeague 2016</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--........................end danh mục giải đấu......................-->
            <!--..........................start mới đăng.........................-->
            <div class="row">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Mới Đăng</h3>
                    </div>
                    <div class="panel-body text-left">
                        <ul style="margin-left: -20px;">
                            <li class="text-justify"><a href="#">Giới thiệu giải đấu Laliga mùa giải 2016-2017</a> - <span class="icon_bai_viet">19/08/2016</span></li>
                            <li class="text-justify"><a href="#">Video Xứ Wales vs Bắc Ireland - ngày 25/06/2016 - Euro 2016</a> - <span class="icon_bai_viet">26/06/2016</span></li>
                            <li class="text-justify"><a href="#">Video Thụy Sỹ vs Ba Lan - ngày 25/06/2016 - Euro 2016</a> - <span class="icon_bai_viet">25/06/2016</span></li>
                            <li class="text-justify"><a href="#">Video Iceland vs Áo - ngày 22/06/2016 - Euro 2016</a> - <span class="icon_bai_viet">23/06/2016</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--......................end mới đăng..........................-->
            <!--......................start list tag............................-->
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Tags</h3>
                    </div>
                    <div class="panel-body">
                        <a href="#">MU</a>,
                        <a href="#">P.Popba</a>,
                        <a href="#">Arsenal</a>,
                        <a href="#">FA</a>,
                        <a href="#">Champion League</a>,
                        <a href="#">Maurinho</a>,
                        <a href="#">V-League</a>,
                        <a href="#">U19 Việt Nam</a>,
                        <a href="#">Anh Hiếu đẹp trai</a>,
                        <a href="#">Marital</a>,
                        <a href="#">Bảng Xếp Hạng</a>
                    </div>
                </div>
            </div>
            <!--..............................end list tag...........................-->
        </div>

        <!--.......................start footer.........................-->
        <div class="footer">

            <p class="can_left" style="padding-right: 50px;">
                Copyright © 2016. Báo Bóng Đá - Email: <a href="">baobongda.info@gmail.com</a>
            </p>
            <p class="share_icon can_left">
                <a href=""> <i class="fa fa-facebook"></i> <span>Facebook</span> </a>
                <a href="" class="plus"> <i class="fa fa-google-plus"></i> <span>Google +</span> </a>
                <a href="" class="twitter"> <i class="fa fa-twitter"></i> <span>Twitter</span> </a>
                <a href="" class="rss"> <i class="fa fa-rss"></i> <span>RSS</span> </a>
            </p>
            <p class="can_right"><small>Group FOUR CAT </small></p>
        </div>
        <!--.....................end footer......................-->
    </div>
</body>
</html>